import React from "react";
import Icon from ".";
import { ReactComponent as SmileIcon } from 'assets/icons/smile.svg';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCommentDots } from '@fortawesome/free-solid-svg-icons';


const IconStory = {
    title: "UI组件/Icon",
    component: Icon
}
export default IconStory;

export const Default = () => <Icon icon={SmileIcon} />;

export const CuntomColor = () => {
    return <Icon icon={SmileIcon} color="#ccc" />;
}

export const CuntomSize = () => {
    return <Icon icon={SmileIcon} color="#ccc" width={48} height={48} />;
}

export const FontAwesome = () => {
    return <FontAwesomeIcon icon={faCommentDots} />
}

export const FontAwesomeColor = () => {
    return <FontAwesomeIcon icon={faCommentDots} style={{ color: "greenYellow" }} />
}

export const FontAwesomeSizes = () => {
    return <div>
        <FontAwesomeIcon icon={faCommentDots} style={{ fontSize: "48px" }} />
        <FontAwesomeIcon icon={faCommentDots} style={{ fontSize: "52px" }} />
        <FontAwesomeIcon icon={faCommentDots} style={{ fontSize: "60px" }} />
        <FontAwesomeIcon icon={faCommentDots} style={{ fontSize: "72px" }} />
    </div>
}
